<template>
  <layout :title-url="title">
    <xdh-layout>
      <div slot="west" class="west-box">
        <div class="west-box-top">
          <mod-title title="六大监察对象"></mod-title>
          <bar-one :series-data="oneData" :x-axis-data="oneXData"></bar-one>
        </div>
        <div class="west-box-bottom" ref="areaHeight">
          <el-carousel trigger="click" arrow="never" :interval="5000" indicator-position="outside"
                       :height="barHeight">
            <el-carousel-item v-for="item in 2" :key="item">
              <mod-title :title="item === 1 ? '职级分别' : '年龄性别分布'"></mod-title>
              <js-pie :echartData="echartData" :colors="colors" v-show="item === 1"></js-pie>
              <pie-one :series-data="pieOneData" :series-outer-data="seriesOuterData" v-show="item === 2"></pie-one>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="main-box">
        <div class="main-box-top">
          <js-count title="监督对象总量" count="3421"></js-count>
        </div>
        <div class="main-box-bottom">
          <js-map></js-map>
        </div>
      </div>
      <div slot="east" class="east-box">
        <div class="east-box-top">
          <mod-title title="重点行业"></mod-title>
          <bar-one :series-data="workData" :x-axis-data="workXData"></bar-one>

        </div>
        <!--<div class="east-box-center">-->
        <!--<mod-title title="年龄分布"></mod-title>-->
        <!--<pie-two  unit="人" :show-sum="true" :series-data="pieTwoData"></pie-two>-->
        <!--</div>-->
        <div class="east-box-bottom">
          <mod-title title="各地市检察对象总人数"></mod-title>
          <bar-two :series-data="twoData" :x-axis-data="twoXData"></bar-two>
        </div>
      </div>
    </xdh-layout>
  </layout>
</template>

<script>
  import Layout from '../components/layout.vue'
  import XdhLayout from '../widgets/xdh-layout'
  import ModTitle from '../components/mod-title.vue'
  import BarOne from '../components/bar-one'
  import BarTwo from '../components/bar-two'
  import JsMap from '../components/js-map.vue'
  import PieOne from '../components/pie-one'
  import PieTwo from '../components/pie-two'
  import PictorialBar from '../components/pictorial-bar'
  import JsCount from '../components/js-count'
  import jsPie from '../components/js-pie'
  import {on} from 'element-ui/lib/utils/dom'

  export default {
    name: 'supervise',
    components: {
      Layout,
      XdhLayout,
      ModTitle,
      BarOne,
      BarTwo,
      JsMap,
      PieOne,
      PieTwo,
      PictorialBar,
      jsPie,
      JsCount
    },
    directives: {},
    mixins: [],
    data() {
      return {
        areaH: '',
        title: require('../assets/bigscreen/supervise-title.png'),
        oneData: [500, 2000, 1360, 1000, 10000, 2000],
        oneXData: ['公务员和参公管理人员', '法律、法规授权或受国家机关依法委托管理公共事务的组织中从事公务的人员', '国有企业管理人员', '公办的教育科研、文化、医疗卫生、体育等单位中从事管理的人员', '基层群众性自治组织中从事管理的人员', '其它依法履行公职人员'],
        workData: [500, 2000, 1360, 1000, 1000, 200, 323, 455],
        workXData: ['教育', '卫生', '国资监管', '农业', '金融', '市场监管', '环保', '国土'],
        twoData: [2450, 2250, 2220, 2142, 1960, 1840, 1690, 1590, 1473, 1387, 1189, 950, 830, 800],
        twoXData: ['省纪委', '南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁'],
        pieOneData: [
          {value: 1021, name: '女性', selected: true},
          {value: 2400, name: '男性'}
        ],
        seriesOuterData: [
          {value: 1190, name: '20岁~30岁'},
          {value: 1073, name: '30岁~40岁'},
          {value: 1190, name: '50岁以上'}
        ],
        echartData: [
          {value: 85, name: '正厅局级'},
          {value: 100, name: '副厅局级'},
          {value: 120, name: '正县处级'},
          {value: 130, name: '副县处级'},
          {value: 140, name: '正乡科级'},
          {value: 150, name: '副乡科级'},
          {value: 180, name: '一般干部'},
          {value: 200, name: '其他'}
        ],
        colors: ['#ffb12b', '#ff7b35', '#f8553e', '#0379d7', '#00becb', '#9a79bb', '#e44f91', '#00c96b'],
        picXData: ['博士', '硕士', '本科', '其它'],
        picSData: [678, 1450, 900, 500]
      }
    },
    computed: {
      barHeight() {
        return this.areaH + 'px'
      }
    },
    watch: {},
    mounted() {
      this.areaH = this.$refs.areaHeight.clientHeight - 40;
      on(window, 'resize', this.getAreaHeight);
    },
    methods: {
      getAreaHeight() {
        this.areaH = this.$refs.areaHeight.clientHeight - 40;
      }
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .west-box {
    height: 100vh;
    &-top {
      height: 45%;
      padding-top: 9%;
      padding-bottom: 2%;
    }
    &-bottom {
      height: 45%;
    }
  }

  .main-box {
    height: 100vh;
    &-top {
      height: 15%;
      padding-top: 15%;
    }
    &-bottom {
      padding-top: 10px;
      height: 70%;
    }
  }

  .east-box {
    height: 100vh;
    &-top {
      height: 35%;
      padding-top: 9%;
    }
    &-bottom {
      height: 60%;
    }
  }
</style>
